<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="550px"
  >
    <div class="record">
      <div class="form_item">
        <label>单价：</label>
        <p class="flex-1">{{type==1?infoData.contract: 
				type==2?infoData.sms_amount:
				type==4?infoData.risk_boolea_credit_price:
				type==6?infoData.risk_radar_credit_price:
				type==8?infoData.risk_cre_credit_price:
				infoData.risk_credit_price}}元/{{type!=3? '条': '次'}}
          <span>（{{
						type==1?'根据e签宝合同价格'
						: type==2?'远低于市场价格'
						: type==4?'根据布尔数据价格'
						: type==6?'根据雷达报告价格'
						:	type==8?'根据征信报告价格':'根据百融风控价格'}}）</span>
        </p>
      </div>
      <div class="form_item">
        <label>购买记录：</label>
        <div class="flex-1 flex flex-wrap">
          <div
            class="pointer buy_item"
            v-for="item in infoData.setMeal"
            :key="item.id"
            :class="{'active':selectId==item.id}"
            @click="selectId=item.id"
          >
            <p>{{item.number}}<span class="color-999">{{type!=3? '条': '次'}}</span></p>
            <p>￥{{item.amount}}</p>
          </div>
        </div>
      </div>
      <div class="form_item">
        <label>账户余额：</label>
        <div class="flex-1 flex"><span style="margin-right:20px">{{infoData.shop_balance}}元</span>
          <p>余额不足？<span class="blue-font pointer" @click="goToRecharge">去充值</span></p>
        </div>
      </div>
      <p style="padding-left:50px;margin-top:20px">
        <el-checkbox
          :class="{'check_form':showError}"
          v-model="checked"
          @change="showError=false"
        >我已阅读并同意<span class="blue-font">《增值服务营销软件服务使用规范》</span></el-checkbox>
      </p>
    </div>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="dialogVisible = false"
      >取 消</el-button>
      <el-button
        size="small"
        type="primary"
        @click="submit"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { buyInfo, toBuy } from "@/api/marketing";
export default {
  props: {
    dialogTitle: {
      type: String
    },
    type: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialogVisible: false,
      infoData: {},
      selectId: '',
      checked: false,
      showError: false
    }
  },
  methods: {
    goToRecharge() {
      let routeData = this.$router.resolve({
        name: "recharge"
      });
      window.open(routeData.href, '_blank');
    },
    submit() {
      if (!this.checked) {
        this.$message({
          message: "请勾选同意使用规范",
          type: "warning"
        });
        this.showError = true;
        return
      }
      toBuy({
        buy_type: this.type,
        setmeal_id: this.selectId
      }).then(res => {
        this.dialogVisible = false;
        this.$emit('getList');
      })
    },
    getData() {
      buyInfo(this.type).then(res => {
        this.infoData = res || {};
        this.selectId = this.infoData.setMeal[0].id;
      })
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getData();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.record {
  padding: 20px 0;
}
.form_item {
  display: flex;
  margin-bottom: 20px;
  label {
    width: 100px;
  }
  &:nth-of-type(2) {
    margin-bottom: 0;
  }
}
.buy_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  width: 45%;
  margin-bottom: 20px;
  margin-right: 20px;
  &.active {
    border: 1px solid #ff9f37;
  }
  p {
    padding: 15px;
    font-size: 16px;
    span {
      font-size: 14px;
    }
  }
  p:last-child {
    color: #ff9f37;
  }
}
.check_form {
  /deep/.el-checkbox__inner {
    border-color: #ff4146;
  }
}
</style>
